<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>缓慢移动到画布中心</title>
</head>
<body>
<div id="mountNode"></div>
<script src="../build/g6.js"></script>
<script src="../build/dagre.js"></script>
<script>

  const dagre = new Dagre();

const data = {"edges":[{"callPerf":{"avgElapse":0.0,"calls":0,"status":"success"},"id":"edge-20233","source":"msgconsole","target":"osp"},{"callPerf":{"avgElapse":3.2,"calls":6,"status":"success"},"id":"edge-20234","source":"dst-web","target":"DB_rm-nh4417a78t2y34vm2.mysql.rds.aliyuncs.com:3306"},{"callPerf":{"avgElapse":0.0,"calls":0,"status":"success"},"id":"edge-20235","source":"USER","target":"dsrconsole"},{"callPerf":{"avgElapse":0.0,"calls":0,"status":"success"},"id":"edge-20236","source":"USER","target":"osp"},{"callPerf":{"avgElapse":0.0,"calls":0,"status":"success"},"id":"edge-20237","source":"USER","target":"dbpconsole"},{"callPerf":{"avgElapse":0.0,"calls":0,"status":"success"},"id":"edge-20238","source":"USER","target":"msgconsole"},{"callPerf":{"avgElapse":0.0,"calls":0,"status":"success"},"id":"edge-20239","source":"USER","target":"drmdata"},{"callPerf":{"avgElapse":0.0,"calls":0,"status":"success"},"id":"edge-20240","source":"drmdata","target":"dsrconsole"},{"callPerf":{"avgElapse":0.0,"calls":0,"status":"success"},"id":"edge-20241","source":"drmdata","target":"10.252.216.177:12200"},{"callPerf":{"avgElapse":0.0,"calls":0,"status":"success"},"id":"edge-20242","source":"drmdata","target":"10.80.59.63:12200"},{"callPerf":{"avgElapse":0.0,"calls":0,"status":"success"},"id":"edge-20243","source":"drmdata","target":"10.80.59.68:12200"},{"callPerf":{"avgElapse":3.1,"calls":28461,"status":"success"},"id":"edge-20244","source":"scheduler","target":"ZDAL_scheduler_ds"},{"callPerf":{"avgElapse":2.1,"calls":300,"status":"success"},"id":"edge-20245","source":"scheduler","target":"MQ"},{"callPerf":{"avgElapse":3.5,"calls":4853,"status":"success"},"id":"edge-20246","source":"dbpconsole","target":"ZDAL_sharedataMysqlDataSource"},{"callPerf":{"avgElapse":0.0,"calls":0,"status":"success"},"id":"edge-20247","source":"dbpconsole","target":"osp"},{"callPerf":{"avgElapse":0.0,"calls":0,"status":"success"},"id":"edge-20248","source":"dsrconsole","target":"osp"},{"callPerf":{"avgElapse":0.0,"calls":0,"status":"success"},"id":"edge-20249","source":"dsrconsole","target":"drmdata"},{"callPerf":{"avgElapse":0.0,"calls":0,"status":"success"},"id":"edge-20250","source":"dsrconsole","target":"antscheduler"}],"nodes":[{"apdex":0.0,"apdexLevel":"BAD","application":{"groupId":"default","name":"msgconsole"},"avgTime":{"empty":true,"name":"avgTime","total":0.0,"values":[]},"errorRate":{"empty":true,"name":"avgTime","total":0.0,"values":[]},"favorite":false,"favoriteId":0,"id":"msgconsole","status":"success","totalCount":{"empty":true,"name":"avgTime","total":0.0,"values":[]},"type":"app"},{"apdex":0.0,"apdexLevel":"BAD","application":{"groupId":"default","name":"osp"},"avgTime":{"empty":true,"name":"avgTime","total":0.0,"values":[]},"errorRate":{"empty":true,"name":"avgTime","total":0.0,"values":[]},"favorite":false,"favoriteId":0,"id":"osp","status":"success","totalCount":{"empty":true,"name":"avgTime","total":0.0,"values":[]},"type":"app"},{"apdex":0.0,"apdexLevel":"BAD","application":{"groupId":"default","name":"dst-web"},"avgTime":{"empty":true,"name":"avgTime","total":0.0,"values":[]},"errorRate":{"empty":true,"name":"avgTime","total":0.0,"values":[]},"favorite":false,"favoriteId":0,"id":"dst-web","status":"success","totalCount":{"empty":true,"name":"avgTime","total":0.0,"values":[]},"type":"app"},{"application":{"groupId":"default","name":"DB_rm-nh4417a78t2y34vm2.mysql.rds.aliyuncs.com:3306"},"id":"DB_rm-nh4417a78t2y34vm2.mysql.rds.aliyuncs.com:3306","status":"success","type":"db"},{"application":{"groupId":"default","name":"USER"},"id":"USER","status":"success","type":"user"},{"apdex":0.0,"apdexLevel":"BAD","application":{"groupId":"default","name":"dsrconsole"},"avgTime":{"empty":true,"name":"avgTime","total":0.0,"values":[]},"errorRate":{"empty":true,"name":"avgTime","total":0.0,"values":[]},"favorite":false,"favoriteId":0,"id":"dsrconsole","status":"success","totalCount":{"empty":true,"name":"avgTime","total":0.0,"values":[]},"type":"app"},{"apdex":0.0,"apdexLevel":"BAD","application":{"groupId":"default","name":"dbpconsole"},"avgTime":{"empty":true,"name":"avgTime","total":0.0,"values":[]},"errorRate":{"empty":true,"name":"avgTime","total":0.0,"values":[]},"favorite":false,"favoriteId":0,"id":"dbpconsole","status":"success","totalCount":{"empty":true,"name":"avgTime","total":0.0,"values":[]},"type":"app"},{"apdex":0.0,"apdexLevel":"BAD","application":{"groupId":"default","name":"drmdata"},"avgTime":{"empty":true,"name":"avgTime","total":0.0,"values":[]},"errorRate":{"empty":true,"name":"avgTime","total":0.0,"values":[]},"favorite":false,"favoriteId":0,"id":"drmdata","status":"success","totalCount":{"empty":true,"name":"avgTime","total":0.0,"values":[]},"type":"app"},{"apdex":0.0,"apdexLevel":"BAD","application":{"groupId":"default","name":"10.252.216.177:12200"},"avgTime":{"empty":true,"name":"avgTime","total":0.0,"values":[]},"errorRate":{"empty":true,"name":"avgTime","total":0.0,"values":[]},"favorite":false,"favoriteId":0,"id":"10.252.216.177:12200","status":"success","totalCount":{"empty":true,"name":"avgTime","total":0.0,"values":[]},"type":"app"},{"apdex":0.0,"apdexLevel":"BAD","application":{"groupId":"default","name":"10.80.59.63:12200"},"avgTime":{"empty":true,"name":"avgTime","total":0.0,"values":[]},"errorRate":{"empty":true,"name":"avgTime","total":0.0,"values":[]},"favorite":false,"favoriteId":0,"id":"10.80.59.63:12200","status":"success","totalCount":{"empty":true,"name":"avgTime","total":0.0,"values":[]},"type":"app"},{"apdex":0.0,"apdexLevel":"BAD","application":{"groupId":"default","name":"10.80.59.68:12200"},"avgTime":{"empty":true,"name":"avgTime","total":0.0,"values":[]},"errorRate":{"empty":true,"name":"avgTime","total":0.0,"values":[]},"favorite":false,"favoriteId":0,"id":"10.80.59.68:12200","status":"success","totalCount":{"empty":true,"name":"avgTime","total":0.0,"values":[]},"type":"app"},{"apdex":0.0,"apdexLevel":"BAD","application":{"groupId":"default","name":"scheduler"},"avgTime":{"empty":true,"name":"avgTime","total":0.0,"values":[]},"errorRate":{"empty":true,"name":"avgTime","total":0.0,"values":[]},"favorite":false,"favoriteId":0,"id":"scheduler","status":"success","totalCount":{"empty":true,"name":"avgTime","total":0.0,"values":[]},"type":"app"},{"application":{"groupId":"default","name":"ZDAL_scheduler_ds"},"id":"ZDAL_scheduler_ds","status":"success","type":"db"},{"application":{"groupId":"default","name":"MQ"},"id":"MQ","status":"success","type":"mq"},{"application":{"groupId":"default","name":"ZDAL_sharedataMysqlDataSource"},"id":"ZDAL_sharedataMysqlDataSource","status":"success","type":"db"},{"apdex":0.0,"apdexLevel":"BAD","application":{"groupId":"default","name":"antscheduler"},"avgTime":{"empty":true,"name":"avgTime","total":0.0,"values":[]},"errorRate":{"empty":true,"name":"avgTime","total":0.0,"values":[]},"favorite":false,"favoriteId":0,"id":"antscheduler","status":"success","totalCount":{"empty":true,"name":"avgTime","total":0.0,"values":[]},"type":"app"}]}

// 自定义边
  G6.registerEdge('my-edge', {
    // 复写控制点的逻辑
    curvePosition: 0.5, // 弯曲的默认位置
    curveOffset: -20, 
    getControlPoints(cfg) {
      const controlPoints = []; // 指定controlPoints
      const level = -5; // 从 -10， 10
      const offset = level * -25; // 根据不同的level 计算不同的偏移
      const { startPoint, endPoint } = cfg;
      const innerPoint = G6.Util.getControlPoint(startPoint, endPoint, 0.5, offset);
      controlPoints.push(innerPoint);
      return controlPoints;
    },
  }, 'quadratic');

  // 自定义节点，设置锚点
  G6.registerNode('customNode', {
    getAnchorPoints: () => {
      return [
        [0.5, 1],
        [0.5, 0]
      ];     // 底边中点
    },
    draw: (model, group) => {
      const widths = 150;
      const heights = 50;
      const aa = group.addShape('text', {
        attrs: {
          x: -widths / 4,
          y: -heights / 25,
          textBaseline: 'middle',
          fill: '#333',
          fontSize: 24,
          text: model.id,
        },
      });
      const texta = group.addShape('rect', {
        attrs: {
          x: -widths / 2,
          y: -heights / 2,
          width: widths,
          height: heights,
          stroke: model.isselect ? '#d9d9d9' : 'red',
          fill: model.isselect && 'red',
          radius: 25,
        },
      });
      return texta;
    },
  });

  const graph = new G6.Graph({
    container: 'mountNode',
    width: 1000,
    height: 800,
    defaultNode: {
      size: [20, 20]
    },
    animate: true,
    modes: {
      default: [ 'drag-node', 'drag-canvas', 'zoom-canvas' ]
    },
    nodeStyle: {
      default: {
        fill: '#40a9ff',
        stroke: '#096dd9'
      }
    },
  	edgeStyle: {
    	default: {
        stroke: '#A3B1BF',
        style: {
          endArrow: true
        }
    	}
    },
    defaultNode: {
      shape: 'customNode'
    },
  	defaultEdge: {
    	shape: 'my-edge'
    }
  });

  dagre.layout(data)

//   const layout = new dagre({ size: [300, 300], type: 'delegate' });
// console.log(layout)
  // G6Plugins.Dagre(data)

  graph.data(data)
  graph.render()

  graph.fitView()

  graph.on('node:click', evt => {
    const { item } = evt
    const model = item.getModel()
    const point = graph.getPointByCanvas(500, 400)
    const dx = point.x - model.x
    const dy = point.y - model.y
    graph.getNodes().forEach(node => {
      const model = node.getModel()
      model.x += dx
      model.y += dy
    })

    graph.refresh()
  })
  
</script>
</body>
</html>
